<template>
  <div class="w-full min-h-screen bg-gray-50 relative">
    <!-- 导航栏 -->
    <div class="bg-white border-b border-gray-100">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center">
          <button @click="$router.back()" class="mr-4 text-gray-600">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1 class="text-lg font-semibold text-gray-800">播放设置</h1>
        </div>
        <button class="text-blue-600 text-sm font-medium">保存</button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="px-4 py-6 pb-20">
      <!-- 播放质量 -->
      <div class="bg-white rounded-lg shadow-sm mb-6">
        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">播放质量</h3>
          <div class="space-y-3">
            <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <span class="text-gray-700">自动选择</span>
              <input v-model="playSettings.quality" type="radio" value="auto" class="w-4 h-4 text-blue-600" />
            </label>
            <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <span class="text-gray-700">超高清 4K</span>
              <input v-model="playSettings.quality" type="radio" value="4k" class="w-4 h-4 text-blue-600" />
            </label>
            <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <span class="text-gray-700">高清 1080P</span>
              <input v-model="playSettings.quality" type="radio" value="1080p" class="w-4 h-4 text-blue-600" />
            </label>
            <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <span class="text-gray-700">标清 720P</span>
              <input v-model="playSettings.quality" type="radio" value="720p" class="w-4 h-4 text-blue-600" />
            </label>
          </div>
        </div>
      </div>

      <!-- 播放行为 -->
      <div class="bg-white rounded-lg shadow-sm mb-6">
        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">播放行为</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">自动播放下一集</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="playSettings.autoPlay" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">播放时跳过片头片尾</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="playSettings.skipIntro" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">后台播放</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="playSettings.backgroundPlay" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 字幕设置 -->
      <div class="bg-white rounded-lg shadow-sm mb-6">
        <div class="p-4">
          <h3 class="font-semibold text-gray-800 mb-2">字幕设置</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">显示字幕</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="playSettings.showSubtitle" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">字幕大小</span>
              <select v-model="playSettings.subtitleSize" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="small">小</option>
                <option value="medium">中</option>
                <option value="large">大</option>
              </select>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">字幕颜色</span>
              <select v-model="playSettings.subtitleColor" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="white">白色</option>
                <option value="yellow">黄色</option>
                <option value="blue">蓝色</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- 音量和亮度 -->
      <div class="bg-white rounded-lg shadow-sm">
        <div class="p-4">
          <h3 class="font-semibold text-gray-800 mb-2">音量和亮度</h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between mb-2">
                <span class="text-gray-700">默认音量</span>
                <span class="text-sm text-gray-500">{{ playSettings.defaultVolume }}%</span>
              </div>
              <input
                v-model="playSettings.defaultVolume"
                type="range"
                min="0"
                max="100"
                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
              />
            </div>
            <div>
              <div class="flex justify-between mb-2">
                <span class="text-gray-700">默认亮度</span>
                <span class="text-sm text-gray-500">{{ playSettings.defaultBrightness }}%</span>
              </div>
              <input
                v-model="playSettings.defaultBrightness"
                type="range"
                min="0"
                max="100"
                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const playSettings = ref({
  quality: 'auto',
  autoPlay: true,
  skipIntro: true,
  backgroundPlay: false,
  showSubtitle: true,
  subtitleSize: 'medium',
  subtitleColor: 'white',
  defaultVolume: 70,
  defaultBrightness: 80
})

const saveSettings = () => {
  console.log('保存播放设置:', playSettings.value)
  alert('设置已保存')
}
</script>
